<template>
    <div>
        <div class="head">
            <img src="kandian/zufang/1.png" @click="fun()" />
            <div class="head-content">
                <p>
                北京
                <span class="iconfont icon-triangle-down"></span>
                </p>
                <span class="iconfont icon-fangdajing"></span>
                <input type="text" placeholder="南窑国际" />
            </div>
            <span class="iconfont icon-xiaoxi"></span>
        </div>
        <ZuTop />

        <van-tabs v-model="active" >
            <van-tab title="猜你喜欢" ><Zu1/> </van-tab>
            <van-tab title="附近房源" ><Zu1/> </van-tab>
            <van-tab title="新上好房" ><Zu1/> </van-tab>
            <van-tab title="业主自荐" ><Zu1/> </van-tab>
        </van-tabs>
        <Zu2  v-for="(v,i) in this.$store.state.mkandian.obj.data" :key="i" :name="v.name" :img="v.img" 
         :price3="v.price3" :tit="v.tit" :houseSubtitle="v.houseSubtitle" :subtitle="v.subtitle" :i="i"/>
        <div class="kong"></div>
        <Botbar />
    </div>
</template>
<script>
import Botbar from "@/components/zufang/botbar.vue"
import ZuTop from "@/components/zufang/zutop.vue";
import Zu1 from "@/components/zufang/zu1.vue";
import Zu2 from "@/components/zufang/zu2.vue";
export default {
    components:{
        Botbar ,
        ZuTop,
        Zu1,
        Zu2 
    },
    methods:{
        fun(){
            this.$router.push("/home")
        },
    },
      data() {
    return {
      active: 2,
    };
  },
     mounted(){
        this.$store.dispatch("listact")
    },

}
</script>
<style scoped>
    .head {
        margin-top:0.3rem;
        width:100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        font-size: 0.15rem;
    }
    .head img{
        width:0.2rem;
    }
    .head span{
    font-size: 0.15rem;
    }
    .head p {
    margin-right: 0.1rem;
    }
    .head input {
    width: 1.38rem;
    border: none;
    outline: none;
    margin-left: 0.1rem;
    }
    .head-content {
        width: 2.5rem;
        height:0.44rem;
        border: #e9eaea 0.01rem solid;
        border-radius: 0.1rem;
        display: flex;
        flex-direction: row;
        padding: 0.14rem 0.1rem 0.09rem 0.1rem;
    }
    .kong{
         margin-top:0.6rem;
    }
</style>